<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>横向排列(column-*)</title>
    <!-- 
      CSS中的 column-* 属性用于创建多列布局，主要用于文本内容的分栏显示。
        1. ** column-count **：指定元素应该分成多少列。例如： `column-count: 3;` 将元素分成3列。
        2. ** column-width **：指定每列的最小宽度。例如：`column-width: 200px;` 将每列的最小宽度设置为200像素。
        3. ** column-gap **：指定列与列之间的间隔。例如：`column-gap: 20px;` 将列与列之间的间隔设置为20像素。
        4. ** column-rule **：指定列与列之间的分隔线样式。例如：`column-rule: 1px solid black;` 将分隔线设置为1像素宽的实线，颜色为黑色。
        5. ** column-span **：指定元素是否跨越所有列。例如：`column-span: all;` 将元素跨越所有列。
        6. ** column-fill **：指定如何填充列内容。例如：`column-fill: balance;` 将内容平均分配到每一列。
        7. ** column-break-inside **：指定如何处理元素内部的分页或分栏。例如：`column-break-inside: avoid;` 避免在元素内部分页或分栏。
        8. ** column-break-before **：指定在元素之前是否分页或分栏。例如：`column-break-before: always;` 总是在元素之前分页或分栏。
        9. ** column-break-after **：指定在元素之后是否分页或分栏。例如：`column-break-after: always;` 总是在元素之后分页或分栏。
        10. ** columns **：是 column-width 和 column-count 的简写属性。例如：`columns: 200px 3;` 将每列的最小宽度设置为200像素，并将元素分成3列。
        11. ** column-rule-width **、** column-rule-style **、** column-rule-color **：分别用于设置列规则的宽度、样式和颜色，可以单独使用。 
  
        这些属性通常一起使用，以实现更灵活和美观的多列布局。使用 column-* 属性时，浏览器会自动处理文本的分配和排版
     -->
    <style>
      .column-count {
        margin-top: 10px;
        width: 220px;
        border: 1px solid #000;
        column-count: 3; /* 指定列数 */
        column-span: none;
        column-gap: 12px; /* 列与列之间的间距 */
        column-fill: balance;
      }

      .block {
        width: 60px;
        height: 60px;
        background-color: pink;
        border: 1px solid #000;
        margin-bottom: 10px;
      }

      .inline-block {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-color: pink;
        border: 1px solid #000;
        margin-bottom: 10px;
      }

      .big {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <h1>column-count-box-block</h1>
    <div class="column-count">
      <div class="block big">1</div>
      <div class="block">3</div>
      <div class="block big">4</div>
      <div class="block">5</div>
      <div class="block big">6</div>
      <div class="block">7</div>
      <div class="block big">8</div>
      <div class="block">9</div>
    </div>

    <h1>column-count-box-inline-block</h1>
    <div class="column-count">
      <div class="inline-block big">1</div>
      <div class="inline-block">3</div>
      <div class="inline-block big">4</div>
      <div class="inline-block">5</div>
      <div class="inline-block big">6</div>
      <div class="inline-block">7</div>
      <div class="inline-block big">8</div>
      <div class="inline-block">9</div>
    </div>

    <h1>column-count-text</h1>
    <div class="column-count">
      London. Michaelmas term lately over, and the Lord Chancellor sitting in
      Lincoln's Inn Hall. Implacable November weather. As much mud in the
      streets as if the waters had but newly retired from the face of the earth,
      and it would not be wonderful to meet a Megalosaurus, forty feet long or
      so, waddling like an elephantine lizard up Holborn Hill.
    </div>
  </body>
</html>
